<!DOCTYPE html>
<html>
<script>
    var name;
    var msgs = new Array();
    var msgStartIndex = 0;
    var maxMsgCount = 10;

    function Onload() {
        document.getElementById('nameBox').focus();
        document.getElementById('chatDiv').style.display = "none";
    }

    function SaveName() {
        name = document.getElementById('nameBox').value;
        document.getElementById('nameDiv').style.display = "none";
        document.getElementById('chatDiv').style.display = "";
        document.getElementById('inputBox').focus();
    }

    function InputMessage() {
        var msg = document.getElementById('inputBox').value;
        PrintMessage(msg);
    }

    function PrintMessage(msg) {
        if (msgs.length >= maxMsgCount) {
            msgs[msgStartIndex] = FormatMsg(msg);
            msgStartIndex = msgStartIndex + 1 % maxMsgCount;
        } else {
            msgs[msgs.length] = FormatMsg(msg);
        }
        var msgContent = '';
        var start = msgStartIndex;
        for (var i = 0 ; i < maxMsgCount; i++) {
            if (msgs[start] != undefined) {
                msgContent = msgContent + msgs[start] + '\n'
                start = start + 1 % maxMsgCount;
            }
            else {
                break;
            }
        }
        document.getElementById('msgArea').value = msgContent;
    }

    function FormatMsg(msg) {
        return name + ' ' + msg;
    }
</script>

<body onload="Onload()">
    <style type="text/css">
        #msgArea {
            width: 400px;
            height: 200px;
        }
    </style>

    <div id="nameDiv">
        <input id="nameBox" type="text" />
        <input id="nameButton" type="button" value="ok" onclick="SaveName()" />
    </div>
    <div id="chatDiv">
        <textarea id="msgArea"></textarea>
        <br />
        <input id="inputBox" type="text" />
        <input id="inpuyButton" type="button" value="input" onclick="InputMessage()" />
    </div>
</body>
</html>
